<template>
  <el-dialog
    title="办理"
    :visible.sync="visible"
    width="500px"
    :close-on-click-modal="false"
    @open="initDialog"
  >
    <el-form ref="form" :model="form" :rules="rules" label-position="top">
      <el-form-item label="审批意见" prop="opinion">
        <el-input
          v-model="form.opinion"
          type="textarea"
          maxlength="150"
          show-word-limit
          :rows="5"
        />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <template v-if="status === 1">
        <el-button type="primary" @click="handlePassed(3)">通 过</el-button>
        <el-button type="warning" @click="handlePassed(4)">驳 回</el-button>
      </template>

      <template v-if="status === 2">
        <el-button type="primary" @click="withdraw">撤 回</el-button>
      </template>

      <template v-if="status === 3">
        <el-button type="primary" @click="undo">撤 销</el-button>
      </template>

    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'WorkFlowPop',
  props: {
  },
  data() {
    return {
      form: { opinion: '' },
      rules: {
        opinion: [
          { required: true, message: '审批意见不能为空', trigger: 'blur' }
        ]
      },
      visible: false,
      // 审批状态说明： 1、通过&驳回 2、撤回 3、撤销
      status: null
    }
  },
  methods: {
    /**
     * 撤回
     */
    withdraw() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.$emit('on-withdraw', this.form.opinion)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    /**
     * 撤销
     */
    undo() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.$emit('undo', this.form.opinion)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    /**
     * 通过驳回
     * @param {number} val 2、通过；3、驳回
     */
    handlePassed(val) {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.$emit('on-handlePassed',
            {
              opinion: this.form.opinion,
              status: val
            }
          )
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    initDialog() {
      this.form.opinion = ''
      this.$nextTick(_ => {
        this.$refs.form.clearValidate()
      })
    },
    newDialog(val) {
      this.visible = true
      this.status = val
    },
    closeDialog() {
      this.visible = false
    }

  }
}
</script>

<style scoped>

</style>
